<template>
  <div>
    <el-form class="form"
             ref="form"
             :inline="inline"
             :model="form">
      <div v-if="inline">
        <el-form-item v-for="(item,index) in fields"
                      :key="index"
                      :label="item.fieldName"
                      :prop="item.isRequired === 1?`${item.id}`:''"
                      :rules="item.isRequired === 1?[{required: true, message: `请输入 ${item.fieldName}`, trigger: 'blur'}]:[]">
          <el-input v-if="item.fieldType === 'TextField'"
                    :class="[item.cssClass]"
                    :style="item.cssStyle"
                    v-model="form[item.id]"
                    :readonly="disabled"
                    :disabled="disabled"></el-input>
          <template v-else-if="item.fieldType === 'BusinessObject'">
            <el-input v-if="form[item.id] === null"
                      :class="[item.cssClass,'cursor']"
                      :style="item.cssStyle"
                      v-model="form[item.id]"
                      :readonly="true"
                      :disabled="disabled"
                      @focus="getReferOption(item)"></el-input>
            <el-input v-else
                      :class="[item.cssClass,'cursor']"
                      :style="item.cssStyle"
                      v-model="JSON.parse(form[item.id]).label"
                      :readonly="true"
                      :disabled="disabled"
                      @focus="getReferOption(item)"></el-input>
            <el-input class="hide"
                      v-model="form[item.id]"></el-input>
          </template>
          <el-input-number v-if="item.fieldType === 'TextField' && item.dataType === 'Number'"
                           :class="[item.cssClass]"
                           :style="item.cssStyle"
                           v-model="form[item.id]"
                           :readonly="disabled"
                           :disabled="disabled"
                           :controls="false"
                           :min="item.minVal"
                           :max="item.maxVal"></el-input-number>
          <el-select v-else-if="item.fieldType === 'ComboBox'"
                     v-model="form[item.id]"
                     :readonly="disabled"
                     :disabled="disabled"
                     placeholder="">
            <el-option v-for="dom in options[item.id]"
                       :key="dom.value"
                       :label="dom.label"
                       :value="dom.value"></el-option>
          </el-select>
          <el-radio-group v-else-if="item.fieldType === 'RadioGroup'"
                          v-model="form[item.id]"
                          :readonly="disabled"
                          :disabled="disabled">
            <el-radio v-for="dom in options[item.id]"
                      :key="dom.value"
                      :label="dom.label"
                      :value="dom.value"></el-radio>
          </el-radio-group>
          <el-checkbox-group v-else-if="item.fieldType === 'CheckboxGroup'"
                             v-model="form[item.id]"
                             :readonly="disabled"
                             :disabled="disabled">
            <el-checkbox v-for="dom in options[item.id]"
                         :key="dom.value"
                         :label="dom.label"
                         :value="dom.value"></el-checkbox>
          </el-checkbox-group>
          <template v-else-if="item.fieldType === 'DateField'">
            <el-date-picker v-if="item.dataType !== 'DateMinute'"
                            v-model="form[item.id]"
                            :type="item.dataType === 'DateYear'?'year':item.dataType === 'DateMonth'?'month':item.dataType ==='DateDay'?'date':'datetime'"
                            :value-format="item.dataType === 'DateYear'?'yyyy':item.dataType === 'DateMonth'?'yyyy-MM':item.dataType ==='DateDay'?'yyyy-MM-dd':'yyyy-MM-dd HH:mm:ss'"
                            readonly="disabled"
                            :disabled="disabled"
                            placeholder="选择日期">
            </el-date-picker>
            <el-time-picker v-else-if="item.dataType === 'Datetime'"
                            v-model="form[item.id]"
                            format="HH:mm"
                            value-format="HH:mm"
                            readonly="disabled"
                            :disabled="disabled"
                            placeholder="选择日期">
            </el-time-picker>
            <el-date-picker v-else
                            format="yyyy-MM-dd HH:mm"
                            v-model="form[item.id]"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm"
                            readonly="disabled"
                            :disabled="disabled"
                            placeholder="选择日期">
            </el-date-picker>
          </template>
        </el-form-item>
      </div>
      <el-row v-else>
        <el-col class="item-box"
                :span="item.fieldType === 'TextArea'?14:7"
                v-for="(item,index) in fields"
                :key="index">
          <el-form-item :label="item.fieldName"
                        :prop="item.isRequired === 1?`${item.id}`:''"
                        :rules="item.isRequired === 1?[{required: true, message: `请输入 ${item.fieldName}`, trigger: 'blur'}]:[]">
            <el-input v-if="item.fieldType === 'TextField'"
                      :class="[item.cssClass]"
                      :style="item.cssStyle"
                      v-model="form[item.id]"
                      :readonly="disabled"
                      :disabled="disabled"></el-input>
            <template v-else-if="item.fieldType === 'BusinessObject'">
              <el-input :class="[item.cssClass,'cursor']"
                        :style="item.cssStyle"
                        v-model="form[item.id]"
                        :readonly="true"
                        :disabled="disabled"
                        @focus="getReferOption(item)"></el-input>
              <el-input class="hide"
                        v-model="form[item.id]"></el-input>
            </template>
            <el-input-number v-if="item.fieldType === 'TextField' && item.dataType === 'Number'"
                             :class="[item.cssClass]"
                             :style="item.cssStyle"
                             v-model="form[item.id]"
                             :readonly="disabled"
                             :disabled="disabled"
                             :controls="false"
                             :min="item.minVal"
                             :max="item.maxVal"></el-input-number>
            <el-select v-else-if="item.fieldType === 'ComboBox'"
                       v-model="form[item.id]"
                       :readonly="disabled"
                       :disabled="disabled"
                       placeholder="">
              <el-option v-for="dom in options[item.id]"
                         :key="dom.value"
                         :label="dom.label"
                         :value="dom.value"></el-option>
            </el-select>
            <el-radio-group v-else-if="item.fieldType === 'RadioGroup'"
                            v-model="form[item.id]"
                            :readonly="disabled"
                            :disabled="disabled">
              <el-radio v-for="dom in options[item.id]"
                        :key="dom.value"
                        :label="dom.label"
                        :value="dom.value"></el-radio>
            </el-radio-group>
            <el-checkbox-group v-else-if="item.fieldType === 'CheckboxGroup'"
                               v-model="form[item.id]"
                               :readonly="disabled"
                               :disabled="disabled">
              <el-checkbox v-for="dom in options[item.id]"
                           :key="dom.value"
                           :label="dom.label"
                           :value="dom.value"></el-checkbox>
            </el-checkbox-group>
            <template v-else-if="item.fieldType === 'DateField'">
              <el-date-picker v-if="item.dataType !== 'DateMinute'"
                              v-model="form[item.id]"
                              :type="item.dataType === 'DateYear'?'year':item.dataType === 'DateMonth'?'month':item.dataType ==='DateDay'?'date':'datetime'"
                              :value-format="item.dataType === 'DateYear'?'yyyy':item.dataType === 'DateMonth'?'yyyy-MM':item.dataType ==='DateDay'?'yyyy-MM-dd':'yyyy-MM-dd HH:mm:ss'"
                              readonly="disabled"
                              :disabled="disabled"
                              placeholder="选择日期">
              </el-date-picker>
              <el-time-picker v-else-if="item.dataType === 'Datetime'"
                              v-model="form[item.id]"
                              format="HH:mm"
                              value-format="HH:mm"
                              readonly="disabled"
                              :disabled="disabled"
                              placeholder="选择日期">
              </el-time-picker>
              <el-date-picker v-else
                              format="yyyy-MM-dd HH:mm"
                              v-model="form[item.id]"
                              type="datetime"
                              value-format="yyyy-MM-dd HH:mm"
                              readonly="disabled"
                              :disabled="disabled"
                              placeholder="选择日期">
              </el-date-picker>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <dialogSearch ref="search"
                  :searchObj="searchObj"
                  @confirm="confirm"></dialogSearch>
  </div>
</template>

<script>
import { getInfo } from '../../api/admin/template'
import { getMapping } from '../../const/mapping'
import { getIdByTable } from '../addField/updateOption'
import dialogSearch from './dialogSearch'

export default {
  components: { dialogSearch },
  props: {
    tableName: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: {}
    },
    updateData: {
      type: Array,
      default: []
    },
    inline: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      fields: [],
      options: {},
      searchObj: {},
      customeObj: {
        label: 'label',
        value: 'id'
      }
    }
  },
  watch: {
    updateData: {
      handler () {
        this.getInfo()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getInfo () {
      this.fields = []
      if (this.updateData.length > 0) {
        this.fields = this.updateData
        this.initData()
      } else {
        getIdByTable(this.tableName).then(res => {
          getInfo({ funcId: res.busiFuncId }).then(res => {
            this.fields = res.data.data
            this.initData()
          })
        })
      }
    },
    //加载值
    initData () {
      //默认值
      this.fields.some((res, index) => {
        if (res.fieldVal) this.$set(this.form, res.id, res.fieldVal)
        else {
          if (res.fieldType === 'DateField') this.$set(this.form, res.id, res.defaultVal || this.setValue(res.defaultValExp, res.dataType === 'DateYear' ? 'yyyy' : res.dataType === 'DateMonth' ? 'yyyy-MM' : res.dataType === 'DateDay' ? 'yyyy-MM-dd' : res.dataType === 'DateMinute' ? 'yyyy-MM-dd HH:mm' : res.dataType === 'Datetime' ? 'HH:mm' : 'yyyy-MM-dd HH:mm:ss'))
          else if (res.fieldType === 'TextField') this.$set(this.form, res.id, res.defaultVal || this.setValue(res.defaultValExp))
          else if (res.fieldType === 'CheckboxGroup') this.$set(this.form, res.id, [res.defaultVal])
          else this.$set(this.form, res.id, res.defaultVal)
        }
        // 加载可选值
        this.loadOptions(res)
      })
    },
    loadOptions (item) {
      if (item.fieldType === 'ComboBox' || item.fieldType === 'RadioGroup' || item.fieldType === 'CheckboxGroup') {
        if (item.customDataJson) {
          this.$set(this.options, item.id, JSON.parse(item.customDataJson))
        } else if (item.referBusiFunc) {
          this.options[item.id] = []
        }
      }
    },
    getReferOption (item) {
      this.searchObj = item
      this.$refs.search.visible = true
    },
    setValue (value, format = 'yyyy-mm-dd') {
      return getMapping(this, this.dateChang(format))[value]
    },
    dateChang (date) {
      const result = {
        'year': 'yyyy',
        'month': 'yyyy-MM',
        'date': 'yyyy-MM-dd',
        'datetime': 'yyyy-MM-dd hh:mm:ss',
        'timepicker': 'hh:mm:ss',
        'yyyy-mm-dd': 'yyyy-mm-dd'
      }
      return result[date]
    },
    confirm (result) {
      console.log(result)
      this.form[result.searchObj.id] = JSON.stringify({ label: result.data[result.type.label], value: result.data[result.type.value] })
    }
  }
}
</script>

<style lang="scss" scoped>
.item-box {
  padding: 0 20px;
}
.form {
  position: relative;
  z-index: 999;
}
/deep/.el-form-item__label {
  width: 100%;
  text-align: left;
}
/deep/.el-date-editor.el-input {
  width: 100%;
}
/deep/.el-select,
/deep/.el-input {
  width: 100%;
}
/deep/.el-input-number {
  width: 100%;
  input {
    text-align: left;
  }
}
.cursor {
  /deep/input {
    cursor: pointer;
  }
}
.hide {
  display: none;
}
</style>